<template>
    <div class="theme-container">
      <!--bannar -->
       <div class="header">本地收藏</div>
      <!-- 导航栏 -->
      <Navbar></Navbar>
      <!-- 手账主题部分 -->
      <div class="demo-box">
        <div class="block" v-for="(item, index) in themeList" :key="index" >
          <el-image class="pc"
           :src="item.url"
            style="width:12vw"
            @click="jumptoDesign(item.url)"
            >
          </el-image>
           <div class="demonstration">
             {{item.value}}
             </div>
        </div>
      </div>
      <br>
      <Footer></Footer>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import Header from '@/components/home/header.vue'
import Navbar from '@/components/home/navbar.vue'
import Footer from '@/components/home/footer.vue'
import themeDemo8 from '@/assets/theme-demo/theme-demo8.png'
import themeDemo9 from '@/assets/theme-demo/theme-demo9.png'
import themeDemo10 from '@/assets/theme-demo/theme-demo10.png'
import iconCollectBefore from '@/assets/icon/icon-collect-before.png'
import iconCollectAfter from '@/assets/icon/icon-collect-after.png'
export default {
  components: {
    Header,
    Navbar,
    Footer,
    iconCollectBefore,
    iconCollectAfter
  },
  data () {
    return {
      // 灰色星星
      icon: iconCollectAfter,
      // 账本数据列表
      themeList: [
        { url: themeDemo8,
          value: '日历工作手账'
        },
        { url: themeDemo9,
          value: '美食记录手账'
        },
        { url: themeDemo10,
          value: '日记可爱手账'
        }

      ],
      activeIndex: '1'
    }
  },
  methods: {
    // 跳转到design页面 携带图片url参数
    jumptoDesign (imageUrl) {
      this.$router.push({
        name: 'Design',
        params: {
          url: imageUrl
        }
      })
    }
  },
  computed: {
    ...mapState(['collect'])
  }

}
</script>

<style lang="less" scoped>
.theme-container {
  background-color: #F5F7F9;
     .header {
      background-color: rgb(133, 183, 248);
      color: rgb(16, 79, 196);
      font-size: 2vw;
      text-align: center;
      height: 15vh;
      line-height: 15vh;
  }
    .demo-box {
      display: flex;
      margin: 0 10vw;
      padding-bottom: 2vh;
      background-color: #FFFFFF;
      flex-wrap: wrap;
      .block {
        text-align: center;
        padding: 5px;
        .demonstration {
          font-size: 0.8rem;
          color: rgb(102, 91, 91);
        }
        .pc {
          margin-bottom: 1vh;
          border-radius: 2%;
        }
        margin: 2vw 0 0 2vw;
      }
    }
}
</style>
